<template>
  <el-row :gutter="15">
    <print-modal ref="printModal" :rowId="rowId"></print-modal>
    <el-col :span="24" class="col-xs-12">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15" style="position:relative;">
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNo" style="position: relative">
                <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="outNo" style="position: relative">
                <el-input v-model="search.outNo" type="textarea" :rows="4" placeholder="推单单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneeName">
                <el-input v-model="search.consigneeName" placeholder="客户姓名" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneePhone">
                <el-input v-model="search.consigneePhone" placeholder="客户电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="businessNo">
                <el-select v-model="search.businessNo" clearable placeholder="业务类型">
                  <el-option
                    v-for="item in businessArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceNo">
                <el-select v-model="search.serviceNo" clearable placeholder="服务类型">
                  <el-option
                    v-for="item in serviceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceProvider">
                <el-input v-model="search.serviceProvider" placeholder="服务商名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceProviderPhone">
                <el-input v-model="search.serviceProviderPhone" placeholder="服务商电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderSourceWarehouse">
                <el-input v-model="search.orderSourceWarehouse" placeholder="推单来源" clearable></el-input>
              </el-form-item>
            </el-col>
            <div v-show="isOpen">
              <el-col :lg="4" :md="6">
                <el-form-item prop="address">
                  <cascade-address :level="3" changeOnSelect v-model="search.address" placeholder="客户地址:省/市/区"></cascade-address>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="isArrive">
                  <el-select v-model="search.isArrive" clearable placeholder="是否到件">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="startFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单开始日期"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.startFoundDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="endFoundDate">
                  <el-date-picker type="date"
                                  placeholder="下单结束日期"
                                  v-model="search.endFoundDate"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="signStart">
                  <el-date-picker type="date"
                                  placeholder="签收开始日期"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.signStart" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="signEnd">
                  <el-date-picker type="date"
                                  placeholder="签收结束日期"
                                  v-model="search.signEnd"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :lg="4" :md="6">
                <el-form-item prop="arriveStart">
                  <el-date-picker type="date"
                                  placeholder="到件开始日期"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.arriveStart" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="arriveEnd">
                  <el-date-picker type="date"
                                  placeholder="到件结束日期"
                                  v-model="search.arriveEnd"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-fahuobao-json-view/FhbOrder/findFhbOrderAll"
        :columns="columns"
        :tabs="tabs"
        :showButtonGroup="false"
        @selection-change="selectionChange"
      >
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="订单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="show(scope.row)">{{ scope.row.orderNo }}</a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="80px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                         size="mini"
                         type="text"
                         @click="show(scope.row)"
              ><span>详情</span></el-button>
              <el-button
                         size="mini"
                         type="text"
                         @click="showPrintModal(scope.row)"
              ><span>打印</span></el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {filterDataBaseDictionary, unixTimestampFilter, filterSecond, filterOrderWay} from '@/filters'
import {getFhbServiceType, getFhbOrderSource, getSubDictListOfParentCode} from '@/utils/selectOptions'
import {copy, dotData} from '@/utils'
import printModal from '@/views/fhb/order/PrintModal'
export default {
  name: 'orderIndex',
  components: {
    printModal
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter,
    filterSecond,
    filterOrderWay
  },
  data() {
    let columns = [
      {
        label: '下单方式',
        data: 'orderWay',
        render(data, full) {
          return filterOrderWay(data)
        }
      },
      {
        label: '业务类型',
        data: 'business'
      },
      {
        label: '服务类型',
        data: 'service'
      },
      {
        label: '订单状态',
        data: 'orderState',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '承运商',
        data: 'trunkMerchantName'
      },
      {
        label: '承运商电话',
        data: 'trunkMerchantPhone'
      },
      {
        label: '是否到件',
        data: 'isArriva',
        render(data, full) {
          return full.arrivaTime > 0 ? '是' : '否'
        }
      },
      {
        label: '到件时间',
        data: 'arrivaTime',
        render(data, full) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '服务方',
        data: 'serviceProvider'
      },
      {
        label: '服务方电话',
        data: 'serviceProviderPhone'
      },
      {
        label: '物流费',
        data: 'trunkMoney'
      },
      {
        label: '服务费',
        data: 'biddFee'
      },
      {
        label: '追加费用',
        data: 'addFee'
      },
      {
        label: '退款金额',
        data: 'reimburseFee'
      },
      {
        label: '优惠券',
        data: 'couponsDiscount',
        render(data, full) {
          return data || ''
        }
      },
      {
        label: '实付金额',
        data: 'endFee'
      },
      {
        label: '客户姓名',
        data: 'consigneeName'
      },
      {
        label: '客户电话',
        data: 'consigneePhone'
      },
      {
        label: '客户地址',
        data: 'consigneeProvince-consigneeCity-consigneeDistrict',
        render(data, full) {
          return `${full.consigneeProvince} ${full.consigneeCity} ${full.consigneeDistrict}`
        }
      },
      {
        label: '签收时间',
        width: '134px',
        data: 'signTime',
        render(data, full) {
          return unixTimestampFilter(data)
        }
      },
      {label: '报价次数', data: 'biddersSum'},
      {
        label: '推单来源',
        data: 'orderSourceWarehouse',
        render(data, full) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '推单单号',
        data: 'outNo'
      },
      {
        label: '下单时间',
        width: '134px',
        data: 'foundTime'
      }
    ]
    return {
      rowId: '',
      isShowPrintModal: false,
      visible: false,
      visibleResult: false,
      subOrderFinish: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      isOpen: false,
      searchLoading: false,
      checkedData: [],
      search: {
        orderNo: '',
        outNo: '',
        consigneeName: '',
        consigneePhone: '',
        businessNo: '',
        serviceNo: '',
        serviceProvider: '',
        serviceProviderPhone: '',
        orderSourceWarehouse: '',
        startFoundDate: '',
        endFoundDate: '',
        signStart: '',
        signEnd: '',
        isArrive: '',
        arriveStart: '',
        arriveEnd: ''
      },
      businessArr: [],
      serviceArr: [],
      orderSourceArr: [],
      checkOrderArr: [],
      columns: columns,
      tabs: []
    }
  },
  created() {
    getFhbServiceType().then(data => {
      this.serviceArr = data
    })
    getSubDictListOfParentCode('BSTE').then(data => {
      this.businessArr = data
    })
    getFhbOrderSource().then(data => {
      this.orderSourceArr = data
    })
  },
  destroyed() {
    if (this.subOrderFinish) {
      this.subOrderFinish.unsubscribe()
    }
  },
  methods: {
    selectionChange(arr) {
      this.checkedData = arr
    },
    importModal() {
      this.visible = true
    },
    importResult() {
      this.visibleResult = true
    },
    searchFunc() {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let data = copy(this.search)
        data.provinceNo = dotData(data.address, '[0]') || ''
        data.cityNo = dotData(data.address, '[1]') || ''
        data.districtNo = dotData(data.address, '[2]') || ''
        delete data.address
        this.searchLoading = true
        basicTable.search(data).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    show(data) {
      this.$router.push({path: '/ss-fhb/order/show/' + data.id})
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    showPrintModal(data) {
      this.rowId = data.id
      this.isShowPrintModal = true
      this.$refs.printModal.show()
    }
  }
}
</script>
